<template>
  <section class="homepage-banner">
    <div class="main-banner">
      <img src="../../../assets/front/img/banner.png">
    </div>
    <div class="banner-list">
      <div v-for="(item,index) in list" :key="index" class="banner-item" @click="goToView(index)">
        <img :src="item.image">
      </div>
    </div>
  </section>
</template>


<script>
import HomepageAPI from '@/api/homepage/homepage';
export default {
    data() {
        return {
            list: [
            ]
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            HomepageAPI.getBanner()
                .then(res => {
                    this.list = this.$lodash.slice(res.obj, 0, 3);
                });
        },
        goToView(index) {
            this.$router.push('/f/banner/' + this.list[index].id);
        }
    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-banner {
    width:760px;
    height:460px;
    .main-banner {
      width:760px;
      height:340px;
      .carousel-item {
        width:100%;
        height:100%;
        cursor: pointer;
      }
    }
    .banner-list {
      margin-top:10px;
      display: flex;
      justify-content: space-between;
      .banner-item {
        width:246px;
        height:110px;
        cursor: pointer;
        >img {
          width:100%;
          height:100%;
        }
      }
    }

  }



</style>
